<template>
	<div class="sys-user-container">
		<el-dialog v-model="state.isShowDialog" draggable :close-on-click-modal="false" width="769px">
			<template #header>
				<div style="color: #555">
					<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit /> </el-icon>
					<span>{{ props.title }}</span>
				</div>
			</template>
			<el-tabs v-loading="state.loading" v-model="state.selectedTabName">
				<el-tab-pane :label="$t('message.sysUser.baseInfo')">
					<el-form :model="state.ruleForm" ref="ruleFormRef" size="default" label-width="100px">
						<el-row :gutter="35">							
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
								<el-form-item :label="$t('message.sysUser.account')" prop="account" :rules="[{ required: true, message: t('message.userAlter.accountEmpty'), trigger: 'blur' }]">
									<el-input v-model="state.ruleForm.account" :placeholder="$t('message.sysUser.account')"  />
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
								<el-form-item :label="$t('message.sysUser.name')" prop="name" :rules="[{ required: true, message: t('message.userAlter.nameEmpty'), trigger: 'blur' }]">
									<el-input v-model="state.ruleForm.name" :placeholder="$t('message.sysUser.name')"  />
								</el-form-item>
							</el-col>
							<!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
								<el-form-item label="昵称" prop="nickName">
									<el-input v-model="state.ruleForm.nickName" placeholder="昵称"  />
								</el-form-item>
							</el-col> -->
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
								<el-form-item :label="$t('message.sysUser.phone')" prop="phone" 
								:rules="[{ required: true, message: t('message.userAlter.phoneEmpty'), trigger: 'blur' },{pattern:/^1[34578]\d{9}$/,message: t('message.userAlter.phoneFormat'), trigger: 'blur'}]">
									<el-input v-model="state.ruleForm.phone" :placeholder="$t('message.sysUser.phone')"  />
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
								<el-form-item :label="$t('message.sysUser.birthday')" prop="birthday" :rules="[{ required: true, message: '出生日期不能为空', trigger: 'blur' }]">
									<el-date-picker v-model="state.ruleForm.birthday" type="date" :placeholder="$t('message.sysUser.birthday')" format="YYYY-MM-DD" value-format="YYYY-MM-DD" style="width: 100%" />
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
								<el-form-item :label="$t('message.sysUser.gender')" prop="gender">									
									<el-radio-group v-model="state.ruleForm.gender" >
										<el-radio v-for="d in props.genderData" :key="d.value" :label="d.value" >{{d.name}}</el-radio>
									</el-radio-group>                                        																								
								</el-form-item>								
							</el-col>
							<el-divider border-style="dashed" content-position="center">
								<div style="color: #b1b3b8">{{ $t('message.sysUser.organization') }}</div>
							</el-divider>
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
								<el-form-item :label="$t('message.sysUser.belongOrg')" prop="orgId" :rules="[{ required: true, message: '所属组织不能为空', trigger: 'blur' }]">
									<el-cascader
										:options="props.orgData"
										:props="{ checkStrictly: true, emitPath: false, value: 'id', label: 'orgName' }"
										:placeholder="$t('message.sysUser.belongOrg')"
										
										class="w100"
										v-model="state.ruleForm.orgId"
										@change="changePos"
									>
										<template #default="{ node, data }">
											<span>{{ data.orgName }}</span>
											<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
										</template>
									</el-cascader>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
								<el-form-item :label="$t('message.sysUser.position')" prop="posId" :rules="[{ required: true, message: '职位名称不能为空', trigger: 'blur' }]">
									<el-select v-model="state.ruleForm.posId" :placeholder="$t('message.sysUser.position')" style="width: 100%">
										<el-option v-for="d in state.posData" :key="d.id" :label="d.name" :value="d.id" />
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
								<el-form-item :label="$t('message.sysUser.workId')" prop="workId">
									<el-input v-model="state.ruleForm.workId" :placeholder="$t('message.sysUser.workId')"  />
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
								<el-form-item :label="$t('message.sysUser.joinDate')" prop="joinDate">
									<el-date-picker v-model="state.ruleForm.joinDate" type="date" :placeholder="$t('message.sysUser.joinDate')" format="YYYY-MM-DD" value-format="YYYY-MM-DD" style="width: 100%" />
								</el-form-item>
							</el-col>							
						</el-row>
					</el-form>
				</el-tab-pane>
				<el-tab-pane :label="$t('message.sysUser.archiveInfo')">
					<el-form :model="state.ruleForm" size="default" label-width="100px">
						<el-row :gutter="35">
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
								<el-form-item :label="$t('message.sysUser.cardType')" prop="cardType">
									<el-select v-model="state.ruleForm.cardType" :placeholder="$t('message.sysUser.cardType')" style="width: 100%">
										<el-option label="身份证" :value="0" />
										<el-option label="护照" :value="1" />
										<el-option label="出生证" :value="2" />
										<el-option label="港澳台通行证" :value="3" />
										<el-option label="外国人居留证" :value="4" />
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
								<el-form-item :label="$t('message.sysUser.idCardNum')" prop="idCardNum">
									<el-input v-model="state.ruleForm.idCardNum" :placeholder="$t('message.sysUser.idCardNum')"  />
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
								<el-form-item :label="$t('message.sysUser.nation')" prop="nation">
									<el-input v-model="state.ruleForm.nation" :placeholder="$t('message.sysUser.nation')"  />
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
								<el-form-item :label="$t('message.sysUser.email')" prop="email" 
								:rules="[{pattern:/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,message: t('message.userAlter.emailFormat'), trigger: 'blur'}]">
									<el-input v-model="state.ruleForm.email" :placeholder="$t('message.sysUser.email')"  />
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
								<el-form-item :label="$t('message.sysUser.address')" prop="address">
									<el-input v-model="state.ruleForm.address" :placeholder="$t('message.sysUser.address')"  type="textarea" />
								</el-form-item>
							</el-col>
							<!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
								<el-form-item label="毕业学校" prop="college">
									<el-input v-model="state.ruleForm.college" placeholder="毕业学校"  />
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
								<el-form-item label="文化程度" prop="cultureLevel">
									<el-select v-model="state.ruleForm.cultureLevel" placeholder="文化程度" style="width: 100%">
										<el-option label="小学" :value="0" />
										<el-option label="初中" :value="1" />
										<el-option label="高中" :value="2" />
										<el-option label="中专" :value="3" />
										<el-option label="大专" :value="4" />
										<el-option label="本科" :value="5" />
										<el-option label="硕士研究生" :value="6" />
										<el-option label="博士研究生" :value="7" />
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
								<el-form-item label="政治面貌" prop="politicalOutlook">
									<el-input v-model="state.ruleForm.politicalOutlook" placeholder="政治面貌"  />
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
								<el-form-item label="办公电话" prop="officePhone">
									<el-input v-model="state.ruleForm.officePhone" placeholder="办公电话"  />
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
								<el-form-item label="紧急联系人" prop="emergencyContact">
									<el-input v-model="state.ruleForm.emergencyContact" placeholder="紧急联系人"  />
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
								<el-form-item label="联系人电话" prop="emergencyPhone">
									<el-input v-model="state.ruleForm.emergencyPhone" placeholder="联系人电话"  />
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
								<el-form-item label="联系人地址" prop="emergencyAddress">
									<el-input v-model="state.ruleForm.emergencyAddress" placeholder="紧急联系人"  type="textarea" />
								</el-form-item>
							</el-col> -->
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
								<el-form-item :label="$t('message.sysUser.remark')" prop="remark">
									<el-input v-model="state.ruleForm.remark" :placeholder="$t('message.sysUser.remark')"  type="textarea" />
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</el-tab-pane>
			</el-tabs>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="cancel" size="default">{{$t('message.userOperation.cancel')}}</el-button>
					<el-button type="primary" @click="submit" size="default">{{$t('message.userOperation.submit')}}</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup name="systemEditUser">
import { reactive, ref } from 'vue';
import { feature } from '/@/utils/axios-utils';
import { SysOrg, SysPosition, UserUpdateInput,SysDictData } from '/@/api-services/models/system';
import { ElMessage } from "element-plus";
import { useI18n } from 'vue-i18n';
import userApi from '/@/api-services/apis/system/userApi';
import positionApi from '/@/api-services/apis/system/positionApi';
// 定义变量内容
const { t } = useI18n();
const props = defineProps({
	title: String,
	orgData: Array<SysOrg>,
	genderData: Array<SysDictData>,
});
const ruleFormRef = ref();
const state = reactive({	
	loading: false,
	isShowDialog: false,
	selectedTabName: '0', // 选中的 tab 页
	ruleForm: {} as UserUpdateInput,
	posData: [] as Array<SysPosition> | null | undefined , // 职位数据
	roleData: [] as Array<number>, // 角色数据
});

// 打开弹窗
const openDialog = async (row: any) => {
	state.isShowDialog = true;
	state.loading=true;
	state.selectedTabName = '0'; // 重置为第一个 tab 页
	state.ruleForm = JSON.parse(JSON.stringify(row));
	if (JSON.stringify(row) !== '{}') {
		var position= await positionApi.list({orgId:row.orgId})
		state.posData=position.data.data;	
	} 	
	state.loading=false;
};
const changePos = async ()=>{
	var position= await positionApi.list({orgId:state.ruleForm.orgId})
	state.posData=position.data.data;	
}
const emits = defineEmits(['refresh']);

// 关闭弹窗
const closeDialog = () => {	
	emits('refresh')
	state.isShowDialog = false;
};

// 取消
const cancel = () => {
	state.isShowDialog = false;
};

// 提交
const submit = async () => {
	ruleFormRef.value.validate(async (valid: boolean) => {
		if (!valid) return;		
		var err:Error|null
		if (state.ruleForm.id != undefined && state.ruleForm.id > 0) {
			[err]=await feature(userApi.update(state.ruleForm));
		} else {
			[err]=await feature(userApi.add(state.ruleForm));
		}
		if(err){
			ElMessage.error(err.message)
		}
		else{
			closeDialog();
		}
		
	});
};

// 导出对象
defineExpose({ openDialog });
</script>
